<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="csrf-token" content="{{ csrf_token }}	">
    <title>货位管理</title>
      <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" >
      <script src="/static/bootstrap/js/bootstrap.bundle.min.js" ></script>
  </head>
  <body>
{% include "utils/header.html"%}

<div class="container">
  <h1>货位管理</h1>
  <div style="height: 20px">

    {% if messages %}
      {% for message in messages %}

        <div class="alert {% if message.tags == 'error' %} alert-danger {% endif %} alert-{{ message.tags }} alert-dismissible fade show ">
         {{ message }}
         <!-- 手动关闭按钮（可选） -->
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
  </div>
  {% endfor %}
         <!-- 自动隐藏脚本 -->
  <script>
    // 等待页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
      // 选择所有alert元素
      const alerts = document.querySelectorAll('.alert');
      // 遍历每个alert，设置3秒后隐藏（3000毫秒）
      alerts.forEach(alert => {
        setTimeout(() => {
          // 为隐藏添加淡出动画（需要Bootstrap支持）
          alert.classList.remove('show');
          alert.classList.add('fade');
          // 完全隐藏后移除元素（可选）
          setTimeout(() => alert.remove(), 500);
        }, 3000); // 3秒后执行
      });
    });
  </script>
{% endif %}
</div>

   <div class="container">

<!-- 搜索表单 -->
        <form id="form" method="get" action="{% url 'customer_list' %}" >
        <div class="search-form d-flex align-items-center gap-2 mb-3">
            <a  type="button" class="col-auto btn btn-primary" href="/base/location/addeditdel/">新增</a>
        {% csrf_token %}
        <input type="hidden" name="_methods" value="DELETE">
            <button type="submit"  formmethod="post"  formaction="{% url 'location' %}" class="col-auto  btn btn-danger">批量删除</button>
        <div class="col-2">
            <select   class="form-select" style="padding-top: 3px;margin-top: 1px;margin-bottom: 1px" name="select_type">
              <option value="1" {% if request.GET.select_type == '1' %}selected{% endif %}>启用</option>
              <option value="0" {% if request.GET.select_type == '0' %}selected{% endif %} >停用</option>
            </select>
        </div>
        <div class="col-2">
            <select   class="form-select" style="padding-top: 3px;margin-top: 1px;margin-bottom: 1px" name="material_type_search">
              <option value="all" {% if request.GET.material_type_search == 'all' %}selected{% endif %}>全部</option>
                <option value="raw" {% if request.GET.material_type_search == 'raw' %}selected{% endif %}>原料</option>
              <option value="additive" {% if request.GET.material_type_search == 'additive' %}selected{% endif %} >添加剂</option>
            <option value="packaging" {% if request.GET.material_type_search == 'packaging' %}selected{% endif %} >包材</option>
            <option value="intermediate" {% if request.GET.material_type_search == 'intermediate' %}selected{% endif %} >中间品</option>
            <option value="finished" {% if request.GET.material_type_search == 'finished' %}selected{% endif %} >成品</option>
            </select>
        </div>
        <div class="col-2">
            <input class="form-control" type="text" name="q" placeholder="搜索品名"
                   value="{{ request.GET.q|default:'' }}">
         </div>
            <button type="button" onclick="searchClick()" class="col-auto btn btn-light">搜索</button>
            {% if request.GET.q %}
                <a href="{% url 'location_list' %}">清除搜索</a>
            {% endif %}


        </div>
    <div class="search-form d-flex align-items-center gap-2 mb-3 " >
        <div class="col-auto">
     <input type="checkbox" id="selectAll"> 全选 </div>
    {% include "utils/printtools.html"%}

    </div>
<script type="text/javascript">

            // 修正函数定义：使用标准函数声明，去掉错误的 => 语法
function searchClick() {


        const form = document.getElementById('form');
        // 阻止表单默认提交事件（如果有的话）
            form.onsubmit = function(e) {
                e.preventDefault();
                return false;
            };
        // 若报表设计接口不同，修改 action
        form.action = "{% url 'location_list' %}" ;
        form.method='get'
        form.target="_self"
        form.submit();
    }



</script>

   <div class="row" >
       {% for raw in wl_list %}
           <div class="col-lg-3"  style="padding-top: 10px;padding-left: 10px">
                <div class="card " style="min-height: 300px"  >
                   <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ raw.name }}</h5>
                        <input type="checkbox" class="delete-item" name="delete_ids" value="{{ raw.pk }}-{{ raw.wl }}">
                    </div>

                   <div class="card-body"  >

                      <div class="card-title">
                          {% if raw.state == '1' %}
                          <span class="badge bg-primary">启用</span>
                      {% else %}<span  class="badge bg-danger">停用</span>{% endif %}
                      <span class="badge bg-secondary">
                          {% if raw.wl == 'raw' %}原料
                          {% elif  raw.wl == 'additive' %}添加剂
                          {% elif  raw.wl == 'packaging' %}包材
                          {% elif  raw.wl == 'intermediate' %}中间品
                          {% elif  raw.wl == 'finished' %}成品
                          {% endif %}
                      </span>

                        <span class="badge bg-info">类型：
                            {% if raw.type == '1' %}库区
                            {% elif  raw.type == '0' %}货位
                            {% endif %}
                        </span>

                      </div>

                      <div  class="card-text">
                      <span class="badge bg-info">代码： {{ raw.code }}</span>
                        {% if raw.parent  %} <span class="badge bg-info">
                            上一级：{{ raw.parent }} </span>
                            {% endif %}


                          </div>

                   </div>
                   <div class="card-footer">
                    <!-- 按钮容器：使用 Flex 布局，水平排列，居中对齐，添加间距 -->
                     <div class="d-flex justify-content-center align-items-center gap-2">

                            <a href="/base/location/addeditdel/?pk={{ raw.pk }}&material_type={{ raw.wl }}" class="btn btn-primary ">修改</a>
                            <button type="button" onclick="delClick(pk='{{ raw.pk }}',_method='DELETE',material_type='{{ raw.wl  }}')" class="btn btn-danger ">删除</button>

                      </div>
                  </div>
                </div>
          </div>

       {% endfor %}
   </div>
 </form>
   <script>
function delClick(pk,_method,material_type) {

           // 1. 正确创建表单元素（核心修正）
    const form = document.createElement('form');

    // 2. 阻止表单默认提交（可选，若需要自定义提交逻辑）
    form.onsubmit = function(e) {
        e.preventDefault(); // 阻止默认提交（若要手动处理数据，保留这行；若要自动提交，删除这行）
        // 若需要自定义提交（如 AJAX），可在这里添加逻辑，否则直接提交表单
        // return false; // 若保留 preventDefault，return false 可省略
    }

    // 3. 设置表单提交地址和方法
    form.action = "/base/location/addeditdel/"; // 后端接口地址
    form.method = "post"; // 提交方式（POST/GET）
    form.target = "_self"; // 提交目标（_self 当前页面，_blank 新窗口）

    // 4. 关键：添加表单数据（不能用 form.body，需创建 input 元素）
    // （1）添加 CSRF 令牌（Django 必须，否则后端会拒绝请求）
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content.trim();


    const csrfInput = document.createElement('input');
    csrfInput.type = "hidden";
    csrfInput.name = "csrfmiddlewaretoken";
    csrfInput.value = csrfToken;
    form.appendChild(csrfInput);

    // （2）添加自定义数据（如 {a: 'b'}）
    const data = {

        pk:pk , // 可添加其他需要的参数（如供应商ID）
        material_type: material_type, // 示例：传递物料类型
        _method:_method
   }

    // 循环添加所有数据为隐藏字段
    Object.keys(data).forEach(key => {
        const input = document.createElement('input');
        input.type = "hidden"; // 隐藏字段，不显示在页面
        input.name = key; // 字段名（后端接收的参数名）
        input.value = data[key]; // 字段值
        form.appendChild(input);
   })

    // 5. 可选：添加到页面（不添加也能提交，但部分浏览器要求表单必须在 DOM 中）
    document.body.appendChild(form);

    // 6. 触发表单提交（若需要自动提交）
    form.submit();
   // }
  //  }
}
   </script>
    <!-- 分页（如果使用 ListView 并设置了 paginate_by） -->
    {% if is_paginated %}
    <ul class="pagination pagination-sm">

        {% if page_obj.has_previous %}
            <li class="page-item">
            <a href="?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}" class="page-link"  >首页</a>

            <li class="page-item" >
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}" class="page-link">上一页</a>
            </li>
        {% endif %}
        <li class="page-item" >
        <span >第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
        </li>
        {% if page_obj.has_next %}
             <li class="page-item" >
            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}">下一页</a>
            </li>
             <li class="page-item" >
            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}">末页</a>
            </li>
        {% endif %}
        <!-- 跳转到指定页 -->
    <li class="page-item">
        <form method="get" style="display: flex; align-items: center;">
            <!-- 保留当前页面的其他GET参数（如搜索条件） -->
            {% for key, value in request.GET.items %}
                {% if key != 'page' %}
                    <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endif %}
            {% endfor %}

            <input
                type="number"
                name="page"
                class="form-control form-control-sm mx-1"
                min="1"
                max="{{ page_obj.paginator.num_pages }}"
                value="{{ page_obj.number }}"
                style="width: 60px;"
            >
            <button type="submit" class="btn btn-sm btn-outline-secondary">跳转</button>
        </form>
    </li>
    </ul>
    {% endif %}
   </div>
  </body>
<script>
// 全选/全不选功能
document.getElementById('selectAll').addEventListener('change', function(e) {
    // 获取所有行的复选框
    const checkboxes = document.querySelectorAll('.delete-item');
    // 同步全选框的状态到所有复选框
    checkboxes.forEach(checkbox => {
        checkbox.checked = e.target.checked;
    });
});
</script>
</html>
